<template>
    <div id="settlementlist">
        <el-card>
            <el-row>
                <el-col :span="20">
                    <div class="grid-content">
                        <el-select class="select-prefix" size="mini" v-model="storeNo" placeholder="请选择门店" clearable filterable @change="handleChangeSearch">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>选择门店</span>
                            </template>
                            <el-option-group
                            v-for="group in storeList"
                            :key="group.cityId"
                            :label="group.city">
                                <el-option
                                    v-for="item in group.list"
                                    :key="item.storeNo"
                                    :label="item.storeName"
                                    :value="item.storeNo">
                                </el-option>
                            </el-option-group>
                        </el-select>
                        <el-select class="select-prefix" size="mini" v-model="settleStatus" placeholder="请选择门店" filterable  @change="handleChangeSearch">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>选择状态</span>
                            </template>
                            <el-option
                                v-for="item in $Options.settlementStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select class="select-prefix" size="mini" v-model="settleOrderId" v-loadmore="loadMore" placeholder="请选择结算周期" clearable filterable style="width: 300px" @change="handleChangeSearch">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>选择周期</span>
                            </template>
                            <el-option
                                v-for="item in weeksArray"
                                :key="item.yearth+'.' +item.weekth"
                                :label="'第' + item.weekth + '周'"
                                :value="''+item.yearth+ (item.weekth < 10 ? '0'+item.weekth : ''+item.weekth)">
                                <span style="float: left">{{ '第' +item.weekth + '周'}}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.firstDay + '~' + item.seventhDay }}</span>
                            </el-option>
                            
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content" style="float: right">
                        <el-button size="mini" type="primary" @click="isShow= true">新建结算单</el-button>    
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="mg-t-10">
            <el-table :data="tableData" border stripe>
                <el-table-column label="结算单号" prop="settleOrderId"></el-table-column>
                <el-table-column label="门店名称" prop="storeName"></el-table-column>
                <el-table-column label="结算日期" width="150">
                    <template slot-scope="scope">
                        <span>{{scope.row.gmtStart}}</span><br/>
                        <span>{{scope.row.gmtEnd}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="分成金额" prop="profitAmount"></el-table-column>
                <el-table-column label="费用" prop="expenseAmount"></el-table-column>
                <el-table-column label="补贴" prop="allowanceAmount"></el-table-column>
                <el-table-column label="结转金额" prop="carriedAmount"></el-table-column>
                <el-table-column label="结算金额" prop="settleAmount"></el-table-column>
                <el-table-column label="状态" prop="settleStatus">
                    <template slot-scope="scope">
                        <el-tag size="small" :type="(scope.row.settleStatus == 0 || scope.row.settleStatus== -1) ? 'info' : scope.row.settleStatus == 1 ? 'success' : scope.row.settleStatus == 2 ? 'warning' : scope.row.settleStatus == 3 ? 'danger' : ''">
                            {{(scope.row.settleStatus == 0 || scope.row.settleStatus== -1) ? '待提交' : scope.row.settleStatus == 1 ? '待确认' : scope.row.settleStatus == 2 ? '待结算' : scope.row.settleStatus == 3 ? '已结算' : '-'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100" >
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" v-if="scope.row.settleStatus == 0 || scope.row.settleStatus == -1" @click="handleClickEdit(scope.row)">编辑</el-button>
                        <el-button type="text" size="mini" v-if="scope.row.settleStatus == 1 || scope.row.settleStatus == 2 " @click="handleClickBack(scope.row)">撤回</el-button>
                        <el-button type="text" size="mini" v-if="scope.row.settleStatus == 2" @click="handleClickSubmit(scope.row)">结算</el-button>
                        <el-button type="text" size="mini" v-if="scope.row.settleStatus != 0 && scope.row.settleStatus != -1" @click="handleClickDetails(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <page v-if="total" :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
        </el-card>
        <createSettlement v-if="isShow" isShow :weeksArray="weeksArray" @cancelShow="cancelShow" @getStoreSettlementList="getStoreSettlementList"></createSettlement>
        <settlementDetails v-if="isShowEdit" :isShow="isShowEdit" :buttontype="type" :obj="obj" @cancelShow="cancelShow" @getStoreSettlementList="getStoreSettlementList"></settlementDetails>

    </div>
</template>
<script>
    import page from '../../commonComponents/page'
    import week from '../../../api/commonJs/week'
    import createSettlement from './createSettlement'
    import settlementDetails from './settlementDetails'
    export default {
        components: {page, createSettlement, settlementDetails},
        data() {
            return {
                storeNo: '',
                type: 'edit',
                settleOrderId: '', // 结算周期
                settleStatus: 4, //结算状态
                storeList: [],
                weeksArray: [],
                page: 1,
                size: 10,
                total: 0,
                tableData: [],
                isShow: false,
                isShowEdit: false,
                id: '',
                obj: null,
                loadPage: 0,
                isNomore: false,
                nowWeeksth: ''
            }
        },
        mounted() {
            this.getStoreListByGroup()
           // this.weeksArray= week(new Date().getFullYear()) 
            this.getStoreSettlementList()
            this.getWeekList()
        },
        methods: {
            loadMore() {
                if(!this.isNomore) {
                    this.loadPage--
                    this.getWeekList()
                }
            },
            getWeekList() {
                let params= {
                    insertYearNum: this.loadPage
                }
                this.$server.financialControlApi.getWeekList(params).then(res => {
                    console.log(this.loadPage)
                    if(res.data.weeks.length > 0) {
                        this.weeksArray= this.weeksArray.concat(res.data.weeks.reverse()) 
                        if(this.loadPage == 0) {
                            this.nowWeeksth= res.data.weekth
                        }
                    }else{
                        this.isNomore= true
                    }
                    console.log(this.weeksArray)
                    if(this.loadPage == 0) {
                        let arr= []
                        this.weeksArray.forEach((item,index) => {
                            if(item.weekth < this.nowWeeksth) {
                                arr.push(item)
                               // this.weeksArray.splice(index, 1)
                            }
                        })
                        this.weeksArray= arr
                    }
                })
            },
            getStoreSettlementList() {
                let params= {
                    page: this.page,
                    size: this.size,
                    settleOrderId: this.settleOrderId,
                    settleStatus: this.settleStatus != 4 ? this.settleStatus : '',
                    storeNo: this.storeNo,
                    
                }
                this.$server.financialControlApi.getStoreSettlementList(params).then(res => {
                    this.tableData= res.data
                    this.total= res.total
                })
            },
            getStoreListByGroup() {
                this.$server.systemControlApi.getStoreListByGroup().then(res => {
                    this.storeList= res.data
                })
            },
            handlePageChange(val) {
                this.page= val
                this.getStoreSettlementList()
            },
            handleSizeChange(val) {
                this.size= val
                this.getStoreSettlementList()
            },
            handleChangeSearch() {
                this.total= 0
                this.page=1
                this.getStoreSettlementList()
            },
            cancelShow(val) {
                this.isShow= val
                this.isShowEdit= val
            },
            /**结算单编辑 */
            handleClickEdit(scope) {
                this.type= 'edit'
                this.obj= {
                    id: scope.settleOrderId,
                    storeName: scope.storeName,
                    gmtStart: scope.gmtStart,
                    gmtEnd: scope.gmtEnd,
                    storeNo: scope.storeNo,
                    settleId: scope.settleId,
                    settleStatus: scope.settleStatus,
                    gmtModified: scope.gmtModified
                }
                this.isShowEdit= true
            },
            handleClickBack(scope) {
                let params= {
                    settleId: scope.settleId,
                    settleStatus: 0,
                }
                this.$server.financialControlApi.changeSettlementStatus(params).then(res => {
                   this.getStoreSettlementList()
                })
            },
            handleClickSubmit(scope) {
                let params= {
                    settleId: scope.settleId,
                    settleStatus: 3,
                }
                this.$server.financialControlApi.changeSettlementStatus(params).then(res => {
                   this.getStoreSettlementList()
                })
            },
            handleClickDetails(scope) {
                this.type= 'check'
                this.obj= {
                    id: scope.settleOrderId,
                    storeName: scope.storeName,
                    gmtStart: scope.gmtStart,
                    gmtEnd: scope.gmtEnd,
                    storeNo: scope.storeNo,
                    settleId: scope.settleId,
                    settleStatus: scope.settleStatus,
                    gmtModified: scope.gmtModified
                }
                this.isShowEdit= true
            },
        },
    }
</script>